<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container" style="margin-bottom: 5px">
      <el-row>
        <el-col :span="12">
          <el-button class="filter-item" size="small" style="margin-left: 10px;" @click="handleCreate" type="primary"
                     icon="el-icon-edit">新增
          </el-button>
          <el-button class="filter-item" size="small" style="margin-left: 10px;" @click="handleUpdate" type="primary"
                     icon="el-icon-edit">修改
          </el-button>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-input @keyup.enter.native="handleFilter" size="small" style="width: 200px;" class="filter-item fsc-search"
                    placeholder="节点名称" v-model="listQuery.condition.name">
          </el-input>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-search"
                     @click="handleFilter">搜索
          </el-button>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline"
                     @click="moreCondition">更多
          </el-button>
          <!--<el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-search" @click="handleFilter">列选择</el-button>-->
          <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-checkbox-group v-model="checkColumnList">
                  <el-checkbox label="code">编码</el-checkbox>
                  <el-checkbox label="name">名称</el-checkbox>
                  <el-checkbox label="province">所在省份</el-checkbox>
                  <el-checkbox label="city">所在城市</el-checkbox>
                  <el-checkbox label="county">所在区县</el-checkbox>
                  <el-checkbox label="maxStorage">库容量</el-checkbox>
                  <el-checkbox label="linkMan">联系人</el-checkbox>
                  <el-checkbox label="status">状态</el-checkbox>
                </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <!--更多-->
      <div :class="{'search-transition':searchFlag,h0:true,hAuto:searchFlag,'search-content':true}">
        <el-form ref="form" :model="listQuery.condition" label-width="120px" :inline="true">
          <el-form-item label="名称">
            <el-input placeholder="请输入名称" class="w200" clearable v-model="listQuery.condition.name"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="listQuery.condition.status" placeholder="请选择状态">
              <el-option label="未选择" value=""></el-option>
              <el-option label="正常" value="10"></el-option>
              <el-option label="失效" value="20"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleFilter" style="margin-left: 10px">查询</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!--列表-->
    <el-table ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="加载中"
              border fit highlight-current-row style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" :width="value.width" v-for='(value,key) in columnList' :label="value.title"
                       :key="key">
        <template slot-scope="scope">
          <div v-if="value.key === 'status'">{{scope.row[value.key] | storeHouseFilter}}</div>
          <div v-else>{{scope.row[value.key]}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.current"
                     :page-sizes="[10,20,30, 50]" :page-size="listQuery.size"
                     layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total">
      </el-pagination>
    </div>

    <!--新增/编辑弹出框-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :before-close="handleClose" width="750px">
      <hr>
      <el-form :rules="rules" ref="dataForm" :model="temp" :inline="true" label-width="100px">

        <el-form-item label="名称" prop="name">
          <el-input v-model="temp.name" placeholder="请输入仓库名称" @blur="getIntegrationData"></el-input>
        </el-form-item>

        <el-form-item label="编码" prop="code">
          <el-select v-model="temp.code" filterable remote reserve-keyword  placeholder="请输入编码"
                     :remote-method="getIntegrationData" :loading="select.loading" @change="setAddress" >
            <el-option label="未选择" value=""></el-option>
            <el-option v-for="(item,index) in select.integrationData" :value="item.code" :label="item.code" :key="index"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所在区域">
          <el-input v-model="temp.province" placeholder="省份" class="w163"></el-input>
          <el-input v-model="temp.city" placeholder="市" class="w163"></el-input>
          <el-input v-model="temp.county" placeholder="县" class="w163"></el-input>
        </el-form-item>
        <div></div>
        <el-form-item label="详细地址">
          <el-input v-model="temp.address" style="width: 495px"></el-input>
        </el-form-item>
        <div></div>
        <el-form-item label="联系人">
          <el-input v-model="temp.linkMan" class="w200"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="linkPhone">
          <el-input v-model="temp.linkPhone"></el-input>
        </el-form-item>
        <div></div>
        <el-form-item label="状态">
          <el-select v-model="temp.status" placeholder="请选择状态">
            <el-option label="未选择" value=""></el-option>
            <el-option label="正常" value="10"></el-option>
            <el-option label="失效" value="20"></el-option>
          </el-select>
        </el-form-item>
        <div></div>
        <el-form-item label="备注">
          <el-input v-model="temp.remark" style="width: 495px"></el-input>
        </el-form-item>
        <div></div>
        <el-form-item label="节点配置">
          <div style="margin-top: 20px">
            <el-checkbox-group v-model="temp.nodeOption" size="small">
              <el-checkbox v-for="item in allNodes" :label="item.code" :key="item.id" border>{{item.name}}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button v-if="dialogStatus === 'create'" @click="createData" type="primary">确 定</el-button>
        <el-button v-else @click="updateData" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as nodeOpAPI from '@/api/house/nodeOption'
  import * as validate from '@/utils/validate'
  import waves from '@/directive/waves' // 水波纹指令
  const defaultFormThead = [
    { key: 'code', title: '编码', width: '' },
    { key: 'name', title: '名称', width: '' },
    { key: 'province', title: '所在省份', width: '' },
    { key: 'city', title: '所在城市', width: '' },
    { key: 'county', title: '所在区县', width: '' },
    { key: 'linkMan', title: '联系人', width: '' },
    { key: 'linkPhone', title: '联系电话', width: '' },
    { key: 'status', title: '状态', width: '' }]
  export default {
    name: 'org',
    directives: {
      waves
    },
    data() {
      return {
        columnList: defaultFormThead,
        checkColumnList: ['code', 'name', 'province', 'city', 'county', 'linkMan', 'linkPhone', 'status'],
        searchFlag: false,
        list: null,
        multipleSelection: [],
        listLoading: false,
        listQuery: {
          current: 1,
          size: 10,
          total: 0,
          condition: {
            name: null,
            status: null
          }
        },
        temp: {
          id: null,
          code: null,
          name: '',
          province: null,
          city: null,
          county: null,
          address: null,
          linkMan: null,
          linkPhone: null,
          maxStorage: null,
          status: null,
          remark: null,
          nodeOption: []
        },
        select: {
          loading: false,
          codeValue: [],
          codeOptions: [],
          integrationData: [],
          codeList: []
        },
        allNodes: [
          { id: 1, code: 'is_seek', name: '需寻车' },
          { id: 2, code: 'is_move', name: '需移车' },
          { id: 3, code: 'is_pick', name: '需提车' },
          { id: 4, code: 'is_ship', name: '需发运' }
        ],
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: '编辑发车点',
          create: '新增发车点'
        },
        rules: {
          linkPhone: [{ trigger: 'change', validator: validate.newPhone }],
          code: [{ required: true, message: '编码不能为空', trigger: 'change' }],
          name: [{ required: true, message: '名称不能为空', trigger: 'change' }]
        }
      }
    },
    created() {
      this.getList()
    },
    watch: {
      checkColumnList(valArr) {
        this.columnList = defaultFormThead.filter(v => {
          for (let i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      }
    },
    methods: {
      getList() {
        this.listLoading = true
        nodeOpAPI.queryPage(this.listQuery).then(response => {
          this.listLoading = false
          this.list = response.data.records
          this.listQuery.total = response.data.total
        })
      },
      getIntegrationData(query) {
        const that = this
        if (query !== '') {
          that.select.loading = true
          const param = {
            current: 1,
            size: 20,
            condition: {
              code: query
            }
          }
          nodeOpAPI.getStoreCode(param).then(result => {
            that.select.loading = false
            if (result.code === 0) {
              that.select.integrationData = result.data.records
              console.log('tempCode', that.select.integrationData)
            } else {
              this.$message({
                title: '信息提示',
                message: result.message,
                type: 'error',
                duration: 2000
              })
            }
          })
        } else {
          that.select.integrationData = []
        }
      },
      setAddress(value) {
        const that = this
        that.select.integrationData.map(i => {
          if (i.code === value) {
            that.temp.province = i.province
            that.temp.city = i.city
            that.temp.county = i.county
            that.temp.name = i.name
          }
        })
      },
      handleFilter() {
        this.listQuery.current = 1
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.current = val
        this.getList()
      },
      resetTemp() {
        this.temp = {
          id: null,
          code: null,
          name: null,
          province: null,
          city: null,
          county: null,
          address: null,
          linkMan: null,
          linkPhone: null,
          maxStorage: null,
          status: null,
          remark: null,
          nodeOption: []
        }
        this.allNodes = [
          { id: 1, code: 'is_seek', name: '需寻车' },
          { id: 2, code: 'is_move', name: '需移车' },
          { id: 3, code: 'is_pick', name: '需提车' },
          { id: 4, code: 'is_ship', name: '需发运' }
        ]
        this.select = {
          loading: false,
          codeValue: [],
          codeOptions: [],
          integrationData: [],
          codeList: []
        }
      },
      handleCreate() {
        this.resetTemp()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate()
        })
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const that = this
            nodeOpAPI.create(that.temp).then(response => {
              if (response.code === 0) {
                this.$message({
                  title: '信息提示',
                  message: '创建成功',
                  type: 'info',
                  duration: 2000
                })
                this.dialogFormVisible = false
                this.resetTemp()
                this.getList()
              } else {
                this.$message({
                  title: '错误提示',
                  message: response.message,
                  type: 'error',
                  duration: 2000
                })
              }
            })
          }
        })
      },
      handleUpdate() {
        const that = this
        if (!that.multipleSelection || that.multipleSelection.length < 1) {
          that.$message({
            title: '警告',
            message: '请选择需要修改的数据',
            type: 'warning',
            duration: 2000
          })
        } else if (that.multipleSelection.length > 1) {
          that.$message({
            title: '警告',
            message: '只能选择一条数据进行修改',
            type: 'warning',
            duration: 2000
          })
        } else {
          for (const k in that.multipleSelection[0]) {
            if (k === 'isSeek' && that.multipleSelection[0][k] === '1') {
              that.temp.nodeOption.push('is_seek')
            } else if (k === 'isMove' && that.multipleSelection[0][k] === '1') {
              that.temp.nodeOption.push('is_move')
            } else if (k === 'isPick' && that.multipleSelection[0][k] === '1') {
              that.temp.nodeOption.push('is_pick')
            } else if (k === 'isShip' && that.multipleSelection[0][k] === '1') {
              that.temp.nodeOption.push('is_ship')
            } else {
              if (k !== 'nodeOption') {
                that.temp[k] = that.multipleSelection[0][k]
              }
            }
          }
          that.dialogStatus = 'update'
          that.dialogFormVisible = true
          that.passwordFlag = false
          that.$nextTick(() => {
            that.$refs.dataForm.clearValidate()
          })
        }
      },
      updateData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const that = this
            nodeOpAPI.update(that.temp).then(response => {
              if (response.code === 0) {
                this.$message({
                  title: '成功',
                  message: '修改成功',
                  type: 'info',
                  duration: 2000
                })
                this.dialogFormVisible = false
                this.resetTemp()
                this.getList()
              } else {
                this.$message({
                  title: '错误提示',
                  message: response.message,
                  type: 'error',
                  duration: 2000
                })
              }
            })
          }
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      reset() {
        this.listQuery = {
          current: 1,
          size: 10,
          total: 0,
          condition: {
            name: undefined,
            code: null,
            mobile: null,
            status: null
          }
        }
        this.getList()
      },
      handleClose(done) {
        this.resetTemp()
        this.allNodes = [
          { id: 1, code: 'is_seek', name: '需寻车' },
          { id: 2, code: 'is_move', name: '需移车' },
          { id: 3, code: 'is_pick', name: '需提车' },
          { id: 4, code: 'is_ship', name: '需发运' }
        ]
        this.dialogFormVisible = false
      },
      moreCondition() {
        this.searchFlag = !this.searchFlag
      }
    }
  }
</script>

<style scoped>

</style>
